<template>
	<div class="channel_main">
		<div class="channel_main_header">
			<a :href="channel.siteLink" target="_blank">
				<h1>{{channel.title}}<i>({{feedsData.length}}条)</i></h1>
				<p>{{channel.siteLink}}</p>
			</a>
		</div>
		<article class="channel_main_item">
			<Groups @setDataObject="setDataObject" :feeds="feedsData" len="1000" @getFeedsHandle="getFeedsHandle"></Groups>
		</article>
	</div>
</template>
<script>
	import Axios from 'axios';
	import qs from "Qs";
	export default {
		name: 'channel',
		data: function(){
			return {
				feedsData:this.$store.state.channel.feedsData,
				channel:this.$store.state.channel.channel
			}
		},
		watch:{
			feedsData:function(v){
				this.$store.commit("setChannelData", {
					feedsData: v
				})
			},
			channel: function(v){
				this.$store.commit("setChannelData", {
					channel: v
				})
			}
		},
		components:{
			Groups: r => require.ensure([], () => r(require('../components/groups.vue')), 'groups')
		},
		mounted:function(){
			const that = this;
			this.$emit("setDataObject", {type:"channel", title:"同源新闻", showTip:false})
			this.getSourceNews(this.$route.params.type);
			window.scrollTo(1,1)
		},
		methods:{
			getSourceNews:function(v){
				const that = this;
				new Promise((a, b) => {
					Axios.post(that.$store.state.api.getChannels, qs.stringify({
						name: v
					})).then((res) => {
						console.log(res)
						if (res.data.status === 1){
							that.$set(that, "channel", res.data.data);
							a(v)
						}else{
							a(v)
						}
					}, (err) => {
						b()
					})
				}).then((v) => {
					Axios.post(this.$store.state.api.getSourceNews, qs.stringify({
						channel:v,
						count: 100,
						pn: 0
					})).then((res) => {
						console.log(res)
						if (res.data.status === 1){
							that.$set(that, "feedsData", res.data.data)
						}else{

						}
					}).catch((err) => {

					})
				}, (err) => {
					
				})
				
			},
			getFeedsHandle(v){
				this.getSourceNews(v);
			},
			setDataObject(v){
				this.$emit("setDataObject", v);
			}
		}
	}
</script>
<style lang="less">
	@base:23.44/1rem;
	.channel_main{
		margin:70/@base 0 0;
		.channel_main_header{
			background-color: #fff;
			margin:0 0 10/@base 0;
			padding:30/@base 20/@base;
			font-size: 20/@base;
			a{
				text-decoration: none;
				color:#333;
				h1{
					font-size: 30/@base;
					font-weight: 400;
					padding:10/@base 0;
					i{
						font-style: normal;
						font-size: 20/@base;
						margin:0 0 0 10/@base;
					}
				}
				p{
					font-size: 20/@base;
				}
			}
		}
		article{
			&.channel_main_item{
				header{
					h1{
						padding:10/@base 20/@base;
						font-size: 24/@base;
						font-weight: 400;
						background-color: #fff;
						margin:0 0 10/@base 0;
						text-align: center;
						i{
							font-style: normal;
							font-size: 16/@base;
							margin:0 0 0 10/@base;
							color:#ccc;
						}
						a{
							text-decoration: none;
							color:#003569;
							font-size: 20/@base;
							margin:0 0 0 10/@base;
							padding:5/@base 10/@base;
							border:1/@base solid #ccc;
							border-radius: 5/@base;
							display: inline-block;
						}
					}
				}
			}
		}
	}
</style>